import EchartsMain from "@/components/common/EchartsMain";
import ItemMoudle from "@/components/common/ItemModule"
import TitleMain from "@/components/common/TitleMain"
const AttackType = () => {
  return <ItemMoudle
    className="w-[384px]"
    childClassName="h-[226px] flex items-center justify-between"
    header={
      <TitleMain title="攻击类型" />
    }
  >

    <EchartsMain option={{
      // tooltip: {
      //   trigger: 'item',
      //   formatter: '{b}: {d}%' // 显示百分比
      // },
      legend: {
        orient: 'vertical',
        right: '5%',
        top: 'center',
        formatter: function (name) {
         
          return `${name}  10%`;
          
        },
        width: 160,
        itemGap: 14,
      },
      series: [
        {
          name: '风险分布',
          type: 'pie',
          radius: ['60%', '70%'],
          center: ['20%', '50%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 4,
            borderColor: '#0b1a2d',
            borderWidth: 2
          },
          label: { show: false },
          labelLine: { show: false },
          data: [
            { value: 249, name: '设备漏洞', itemStyle: { color: '#F9D74F' } },
            { value: 300, name: '远程代码执行', itemStyle: { color: '#F7934C' } },
            { value: 180, name: '敏感信息泄露', itemStyle: { color: '#4FC3F7' } },
            { value: 221, name: 'web扫描', itemStyle: { color: '#4DD0A8' } },
            { value: 100, name: 'web扫描', itemStyle: { color: '#5C6BC0' } }
          ]
        }
      ]
    }} />


  </ItemMoudle>
}

export default AttackType